<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="客户姓名" >
            <el-input :disabled="props.type!='edit'" v-model="form.clientName" style="max-width: 200px"/>
        </el-form-item>
        <el-form-item label="客户电话">
            <el-input :disabled="props.type!='edit'" v-model="form.telephone" style="max-width: 200px"/>
        </el-form-item>
        <el-form-item label="客户所在地">
            <el-select :disabled="props.type!='edit'" v-model="form.location" placeholder="请选择" style="max-width: 200px">
                <el-option label="中国" value="shanghai" />
                <el-option label="外国" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="是否VIP">
            <el-switch :disabled="props.type!='edit'" v-model="form.isVip" active-value="1" inactive-value="0"/>
        </el-form-item>
        <el-form-item label="业务类型">
            <el-radio-group :disabled="props.type!='edit'" v-model="form.businessType">
                <el-radio v-for="item in businessTypeDicItems" :label="item.code">{{item.value}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="详情">
            <el-input :disabled="props.type!='edit'"  v-model="form.detail" type="textarea" />
        </el-form-item>
        <el-form-item v-show="props.type=='edit'">
            <el-button type="primary" @click="save()">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script  setup>
    import {ref,reactive,onMounted,onUpdated,onBeforeUpdate} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    // do not use same name with ref
    let props = defineProps(['chatId','show','type','clientId'])
    let businessTypeDicItems = reactive([])
    let form = reactive({
        clientName:'',
        telephone:'',
        location:'',
        businessType:'',
        isVip:'1',
        detail:'',
    })

    let ticketId = null;
    onMounted(function () {
        request.get(`/api/useDic/getDicItems/businessType`).then(resp => {
            businessTypeDicItems.push(...resp)
        })

        if(props.type=='edit'){
            request.get(`/api/chat/getClientInfo/${props.clientId}`).then(resp => {
                form.clientName = resp.customerName
                form.telephone = resp.telephone
            })
        }

        if(props.show){
            for (let key in form){
                delete form[key]
            }
            request.get(`/api/chat/getTicket/${props.chatId}`).then(resp => {
                for (let key in resp){
                    form[key] = resp[key]
                }
            })
        }
    })
    onBeforeUpdate(function () {
        if(props.show){
            for (let key in form){
                delete form[key]
            }
            request.get(`/api/chat/getTicket/${props.chatId}`).then(resp => {
                for (let key in resp){
                    form[key] = resp[key]
                }
            })
        }
    })

    function save(){
        form.chatId = props.chatId
        if(ticketId == null){
            addTicket()
        }else{
            updateTicket()
        }
    }

    function addTicket(){
        request.post("/api/online/addTicket",form).then(resp => {
            ticketId =  resp.id
            form.id = ticketId
            ElMessage({message: '添加成功！',type: 'success'})
        })
    }
    function updateTicket(){
        request.post("/api/online/updateTicket",form).then(resp => {
            ElMessage({message: '修改成功！',type: 'success'})
        })
    }
</script>
